<template>
  <div>
    <div class="one address">
      <div class="customer">
        <span class="title">客户内网分流IP地址</span>
        <el-button type="primary" size="small" @click="addAddress">添加一行</el-button>
        <el-button type="primary" size="default" @click="check">校验</el-button>
      </div>
      <el-form :model="{tableData}" :rules="rules">
        <el-table
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          :data="tableData"
          border
          stripe
        >
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="CUSTOMER_IPV4" label="IPV4" width="240">
            <template slot-scope="scope">
              <el-form-item prop="'tableData.'+scope.$index+'.'CUSTOMER_IPV4">
                <el-input v-model="scope.row.CUSTOMER_IPV4" size="mini" style="width: 200px" placeholder="请输入内容"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="CUSTOMER_IPV6" label="IPV6" width="240">
            <template slot-scope="scope">
              <el-form-item prop="'tableData.'+scope.$index+'.'CUSTOMER_IPV6">
                <el-input v-model="scope.row.CUSTOMER_IPV6" size="mini" placeholder="请输入内容"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <div>
                <!-- <span>{{ row }}</span> -->
                <el-button size="small" type="danger" @click="delRole(scope.$index)">删除</el-button>
              </div>
            </template>
          </el-table-column>

        </el-table>
      </el-form>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      // tableData: [
      //   { id: 9, CUSTOMER_IPV4: '', CUSTOMER_IPV6: '' },
      //   { id: 2, CUSTOMER_IPV4: '', CUSTOMER_IPV6: '' }
      // ],
      tableData: [
        { CUSTOMER_IPV4: '', CUSTOMER_IPV6: '' },
        { CUSTOMER_IPV4: '', CUSTOMER_IPV6: '' }
      ],
      rules: {
        CUSTOMER_IPV4: [
          { required: true, message: '必填', trigger: 'blur' },
          { pattern: /^[a-z0-9_-]{6,18}$/, message: '格式错误', trigger: 'blur' }
        ],
        CUSTOMER_IPV6: [
          { pattern: /^[a-z0-9_-]{6,18}$/, message: '格式错误', trigger: 'blur' }
        ]
      }

    }
  },
  methods: {
    delRole(index) {
      console.log(123, index)
      // const newDataList = this.tableData.filter(i => i.id !== id)
      // this.tableData = newDataList
      this.tableData.splice(index, 1)
    },
    addAddress () {
      console.log(456)
      this.tableData.push({ CUSTOMER_IPV4: '', CUSTOMER_IPV6: '' })
    },
    check () {
      const ipvFour = this.tableData.find(i => i.CUSTOMER_IPV4 === '')
      if (!ipvFour) {
        this.$message('必填')
      }
    }

  }

}
</script>

<style lang="scss" scoped>
.address {
  margin-bottom: 20px;
  .title {
  margin-right: 15px;
}
}
.customer {
  margin-bottom: 20px
}

</style>
